<!DOCTYPE html>
<!-- saved from url=(0045)https://layui.newphper.com/index/preview.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui 在线主题样式生成工具</title>
    <link rel="stylesheet" href="./layui(1).css" media="all">
    <style>
        .site-demo-button {
            margin-bottom: 30px;
        }
        .site-demo-button div {
            margin: 20px 30px 10px;
        }
        .site-demo-button .layui-btn {
            margin: 0 7px 10px 0;
        }
        .footer{text-align: center;margin-bottom: 30px}
    </style>
    <style id="customTheme">
        /*.layui-layout-admin .layui-logo{color:#377dff}.layui-elem-quote{border-left-color:#377dff}.layui-btn{background-color:#377dff}.layui-btn-primary{background-color:#fff}.layui-btn-primary:hover{border-color:#377dff}.layui-btn-group .layui-btn-primary:hover{color:#377dff}.layui-laypage a:hover{color:#377dff}.layui-laypage .layui-laypage-curr .layui-laypage-em{background-color:#377dff}.layui-laypage select:focus{border-color:#377dff!important}.layui-upload-drag .layui-icon{font-size:50px;color:#377dff}.layui-upload-drag[lay-over]{border-color:#377dff}.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#377dff}.layui-nav-tree .layui-nav-bar{background-color:#377dff}.layui-tab-brief>.layui-tab-title .layui-this{color:#377dff}.layui-slider-input-btn i:hover{color:#377dff}.layui-slider-wrap-btn{border-color:#377dff!important}.layui-slider-bar{background:#377dff!important}html .layui-laydate .layui-this{background-color:#377dff!important}.laydate-theme-molv .layui-laydate-header{background-color:#377dff}.laydate-theme-grid .laydate-selected,.laydate-theme-grid .laydate-selected:hover{color:#377dff!important}.layui-progress-bar{background-color:#1164ff}.layui-form-select dl dd.layui-this{background-color:#1164ff}.layui-form-checked,.layui-form-checked:hover{border-color:#1164ff}.layui-form-checked span,.layui-form-checked:hover span{background-color:#1164ff}.layui-form-checked i,.layui-form-checked:hover i{color:#1164ff}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:#1164ff}.layui-form-checked[lay-skin=primary] i{border-color:#1164ff;background-color:#1164ff}.layui-form-onswitch{border-color:#1164ff;background-color:#1164ff}.layui-form-radio>i:hover,.layui-form-radioed>i{color:#1164ff}.layui-table-edit:focus{border-color:#1164ff!important}.layui-nav-tree .layui-nav-itemed:after{background-color:#1164ff}.layui-nav-child dd.layui-this{background-color:#1164ff}.layui-nav .layui-nav-child dd.layui-this a{background-color:#1164ff}.layui-breadcrumb a:hover{color:#1164ff!important}.layui-tab-brief>.layui-tab-more li.layui-this:after,.layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom:2px solid #1164ff}.layui-tab-card>.layui-tab-more .layui-this{color:#1164ff}.layui-timeline-axis{color:#1164ff}.laydate-day-mark::after{background-color:#1164ff!important}.layui-laydate-header i:hover,.layui-laydate-header span:hover{color:#1164ff!important}.layui-laydate-footer span:hover{color:#1164ff!important}.layui-nav .layui-this:after,.layui-nav-bar,.layui-nav-tree .layui-nav-itemed:after{background-color:#1164ff!important}*/
    </style>
<link id="layuicss-laydate" rel="stylesheet" href="./laydate(1).css" media="all"><link id="layuicss-layer" rel="stylesheet" href="./layer(1).css" media="all"><link id="layuicss-skincodecss" rel="stylesheet" href="./code(1).css" media="all"><script type="text/javascript" src="chrome-extension://dbjbempljhcmhlfpfacalomonjpalpko/scripts/inspector.js"></script><input type="hidden" id="_w_brink"></head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="previewTab" style="margin-top: 41px">
    <ul class="layui-tab-title" style="position: fixed;
    width: 100%;
    top: 0;    z-index: 999;
    background: #ffffff;">
        <li class="layui-this" lay-id="button">按钮</li>
        <li lay-id="form">表单</li>
        <li lay-id="date">日期</li>
        <li lay-id="page">分页</li>
        <li lay-id="nav">导航</li>
        <li lay-id="upload">上传</li>
        <li lay-id="slider">滑块</li>
        <li lay-id="transfer">穿梭框</li>
    </ul>
    <div class="layui-tab-content" style="min-height: 400px">
        <div class="layui-tab-item layui-show">
            <fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
                <legend>按钮主题</legend>
                <div>
                    <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
                    <button type="button" class="layui-btn">默认按钮</button>
                    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
                    <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
                    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
                    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field layui-field-title site-demo-button">
                <legend>按钮尺寸</legend>
                <div>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
                    <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>

                    <br>

                    <button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
                    <button type="button" class="layui-btn">默认按钮</button>
                    <button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
                    <button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>

                    <br>

                    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
                    <button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>

                    <br>

                    <div style="width: 216px; margin: 0;">
                        <button type="button" class="layui-btn layui-btn-fluid">流体按钮</button>
                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field layui-field-title site-demo-button">
                <legend>灵活的图标按钮（更多图标请阅览：文档-图标）</legend>
                <div>
                    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>

                    <br>

                    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>

                    <br>

                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>

                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>

                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field layui-field-title site-demo-button">
                <legend>还可以是圆角按钮</legend>
                <div>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
                    <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
                    <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field layui-field-title site-demo-button">
                <legend>风格混搭的按钮</legend>
                <div>
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
                    <a href="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享</button>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field layui-field-title site-demo-button">
                <legend>按钮组</legend>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn">增加</button>
                    <button type="button" class="layui-btn ">编辑</button>
                    <button type="button" class="layui-btn">删除</button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                </div>
            </fieldset>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" action="https://layui.newphper.com/index/preview.html">
                <div class="layui-form-item">
                    <label class="layui-form-label">输入框</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码框</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" required="" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择框</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd><dd lay-value="0" class="">北京</dd><dd lay-value="1" class="">上海</dd><dd lay-value="2" class="">广州</dd><dd lay-value="3" class="">深圳</dd><dd lay-value="4" class="">杭州</dd></dl></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">复选框</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="like[write]" title="写作"><div class="layui-unselect layui-form-checkbox"><span>写作</span><i class="layui-icon layui-icon-ok"></i></div>
                        <input type="checkbox" name="like[read]" title="阅读" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked"><span>阅读</span><i class="layui-icon layui-icon-ok"></i></div>
                        <input type="checkbox" name="like[dai]" title="发呆"><div class="layui-unselect layui-form-checkbox"><span>发呆</span><i class="layui-icon layui-icon-ok"></i></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开关</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="switch" lay-skin="switch"><div class="layui-unselect layui-form-switch" lay-skin="_switch"><em></em><i></i></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单选框</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>男</div></div>
                        <input type="radio" name="sex" value="女" title="女" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>女</div></div>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">文本域</label>
                    <div class="layui-input-block">
                        <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <div id="laydateDemo" lay-key="1"><div id="layui-laydate1" class="layui-laydate layui-laydate-static"><div class="layui-laydate-main laydate-main-list-0"><div class="layui-laydate-header"><i class="layui-icon laydate-icon laydate-prev-y"></i><i class="layui-icon laydate-icon laydate-prev-m"></i><div class="laydate-set-ym"><span lay-ym="2020-7" lay-type="year">2020年</span><span lay-ym="2020-7" lay-type="month">7月</span></div><i class="layui-icon laydate-icon laydate-next-m"></i><i class="layui-icon laydate-icon laydate-next-y"></i></div><div class="layui-laydate-content"><table><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead><tbody><tr><td class="laydate-day-prev" lay-ymd="2020-6-28">28</td><td class="laydate-day-prev" lay-ymd="2020-6-29">29</td><td class="laydate-day-prev" lay-ymd="2020-6-30">30</td><td lay-ymd="2020-7-1" class="">1</td><td lay-ymd="2020-7-2" class="">2</td><td lay-ymd="2020-7-3" class="">3</td><td lay-ymd="2020-7-4" class="">4</td></tr><tr><td lay-ymd="2020-7-5" class="">5</td><td lay-ymd="2020-7-6" class="">6</td><td lay-ymd="2020-7-7" class="">7</td><td lay-ymd="2020-7-8" class="">8</td><td lay-ymd="2020-7-9" class="">9</td><td lay-ymd="2020-7-10" class="">10</td><td lay-ymd="2020-7-11" class="">11</td></tr><tr><td lay-ymd="2020-7-12" class="">12</td><td lay-ymd="2020-7-13" class="">13</td><td lay-ymd="2020-7-14" class="">14</td><td lay-ymd="2020-7-15" class="">15</td><td lay-ymd="2020-7-16" class="">16</td><td lay-ymd="2020-7-17" class="">17</td><td lay-ymd="2020-7-18" class="">18</td></tr><tr><td lay-ymd="2020-7-19" class="">19</td><td lay-ymd="2020-7-20" class="">20</td><td lay-ymd="2020-7-21" class="">21</td><td lay-ymd="2020-7-22" class="">22</td><td class="layui-this" lay-ymd="2020-7-23">23</td><td lay-ymd="2020-7-24" class="">24</td><td lay-ymd="2020-7-25" class="">25</td></tr><tr><td lay-ymd="2020-7-26" class="">26</td><td lay-ymd="2020-7-27" class="">27</td><td lay-ymd="2020-7-28" class="">28</td><td lay-ymd="2020-7-29" class="">29</td><td lay-ymd="2020-7-30" class="">30</td><td lay-ymd="2020-7-31" class="">31</td><td class="laydate-day-next" lay-ymd="2020-8-1">1</td></tr><tr><td class="laydate-day-next" lay-ymd="2020-8-2">2</td><td class="laydate-day-next" lay-ymd="2020-8-3">3</td><td class="laydate-day-next" lay-ymd="2020-8-4">4</td><td class="laydate-day-next" lay-ymd="2020-8-5">5</td><td class="laydate-day-next" lay-ymd="2020-8-6">6</td><td class="laydate-day-next" lay-ymd="2020-8-7">7</td><td class="laydate-day-next" lay-ymd="2020-8-8">8</td></tr></tbody></table></div></div><div class="layui-laydate-footer"><div class="laydate-footer-btns"><span lay-type="clear" class="laydate-btns-clear">重置</span><span lay-type="now" class="laydate-btns-now">现在</span><span lay-type="confirm" class="laydate-btns-confirm">确定</span></div></div></div></div>
        </div>
        <div class="layui-tab-item">
            <div id="pageDemo"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a><a href="javascript:;" data-page="4">4</a><a href="javascript:;" data-page="5">5</a><span class="layui-laypage-spr">…</span><a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a><a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a></div></div>
        </div>
        <div class="layui-tab-item">
            <ul class="layui-nav" lay-filter="">
                <li class="layui-nav-item"><a href="https://layui.newphper.com/index/preview.html">最新活动</a></li>
                <li class="layui-nav-item layui-this"><a href="https://layui.newphper.com/index/preview.html">产品</a></li>
                <li class="layui-nav-item"><a href="https://layui.newphper.com/index/preview.html">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="https://layui.newphper.com/index/preview.html">移动模块</a></dd>
                        <dd><a href="https://layui.newphper.com/index/preview.html">后台模版</a></dd>
                        <dd><a href="https://layui.newphper.com/index/preview.html">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="https://layui.newphper.com/index/preview.html">社区</a></li>
            <span class="layui-nav-bar"></span></ul>
        </div>
        <div class="layui-tab-item">
            <div class="layui-upload-drag" id="uploadDemo">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="sliderDemo" style="margin: 50px 20px; position: relative;"><div class="layui-slider " style="margin-right: 85px;"><div class="layui-slider-tips"></div><div class="layui-slider-bar" style="background:#009688; width:66%;left:0;"></div><div class="layui-slider-wrap" style="left:66%;"><div class="layui-slider-wrap-btn" style="border: 2px solid #009688;"></div></div></div><div class="layui-slider-input layui-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div></div>
        </div>
        <div class="layui-tab-item">
            <div id="demo-transfer"><div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-1"><div class="layui-transfer-box" data-index="0" style="width: 200px; height: 360px;"><div class="layui-transfer-header"><input type="checkbox" name="layTransferLeftCheckAll" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="列表一"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>列表一</span><i class="layui-icon layui-icon-ok"></i></div></div><ul class="layui-transfer-data" style="height: 320px;"><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="李白" value="1"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>李白</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="杜甫" value="2"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>杜甫</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="苏轼" value="3"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>苏轼</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="李清照" value="4"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>李清照</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="鲁迅" disabled="" value="5"><div class="layui-unselect layui-form-checkbox layui-checkbox-disbaled layui-disabled" lay-skin="primary"><span>鲁迅</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="巴金" value="6"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>巴金</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="冰心" value="7"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>冰心</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="矛盾" value="8"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>矛盾</span><i class="layui-icon layui-icon-ok"></i></div></li><li><input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="贤心" value="9"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>贤心</span><i class="layui-icon layui-icon-ok"></i></div></li></ul></div><div class="layui-transfer-active"><button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0"><i class="layui-icon layui-icon-next"></i></button><button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1"><i class="layui-icon layui-icon-prev"></i></button></div><div class="layui-transfer-box" data-index="1" style="width: 200px; height: 360px;"><div class="layui-transfer-header"><input type="checkbox" name="layTransferRightCheckAll" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="列表二"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>列表二</span><i class="layui-icon layui-icon-ok"></i></div></div><ul class="layui-transfer-data" style="height: 320px;"><p class="layui-none">无数据</p></ul></div></div></div>
        </div>
    </div>
</div>
<div class="footer">
    © 2019 <a target="_blank" href="https://www.newphper.com/">newphper.com</a>
</div>

<script id="styleTpl" type="text/html">
    .layui-layout-admin .layui-logo {
    color: {{ d.color.primary }}
    }
    .layui-elem-quote {
    border-left-color: {{ d.color.primary }}
    }
    .layui-btn {
    background-color: {{ d.color.primary }}
    {{# if( d.button ){ }}
        {{# if( d.button.border_radius ){ }}
            ;border-radius: {{ d.button.border_radius }}px
        {{# } }}
    {{# } }}
    }
    .layui-btn-primary {
    background-color: #fff
    }
    .layui-btn-primary:hover {
    border-color: {{ d.color.primary }}
    }
    .layui-btn-group .layui-btn-primary:hover {
    color: {{ d.color.primary }}
    }
    .layui-laypage a:hover {
    color: {{ d.color.primary }}
    }
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: {{ d.color.primary }}
    }
    .layui-laypage select:focus {
    border-color: {{ d.color.primary }} !important
    }
    .layui-upload-drag .layui-icon {
    font-size: 50px;
    color: {{ d.color.primary }}
    }
    .layui-upload-drag[lay-over] {
    border-color: {{ d.color.primary }}
    }
    .layui-nav-tree .layui-nav-child dd.layui-this a {
    background-color: {{ d.color.primary }}
    }
    .layui-nav-tree .layui-nav-bar {
    background-color: {{ d.color.primary }}
    }
    .layui-tab-brief > .layui-tab-title .layui-this {
    color: {{ d.color.primary }}
    }
    .layui-slider-input-btn i:hover {
    color: {{ d.color.primary }}
    }
    .layui-slider-wrap-btn {
    border-color: {{ d.color.primary }} !important
    }
    .layui-slider-bar {
    background: {{ d.color.primary }} !important
    }
    html .layui-laydate .layui-this {
    background-color: {{ d.color.primary }} !important
    }
    .laydate-theme-molv .layui-laydate-header {
    background-color: {{ d.color.primary }}
    }
    .laydate-theme-grid .laydate-selected, .laydate-theme-grid .laydate-selected:hover {
    color: {{ d.color.primary }} !important
    }
    .layui-progress-bar {
    background-color: {{ d.color.secondary }}
    }
    .layui-form-select dl dd.layui-this {
    background-color: {{ d.color.secondary }}
    }
    .layui-form-checked, .layui-form-checked:hover {
    border-color: {{ d.color.secondary }}
    }
    .layui-form-checked span, .layui-form-checked:hover span {
    background-color: {{ d.color.secondary }}
    }
    .layui-form-checked i, .layui-form-checked:hover i {
    color: {{ d.color.secondary }}
    }
    .layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: {{ d.color.secondary }}
    }
    .layui-form-checked[lay-skin=primary] i {
    border-color: {{ d.color.secondary }};
    background-color: {{ d.color.secondary }}
    }
    .layui-form-onswitch {
    border-color: {{ d.color.secondary }};
    background-color: {{ d.color.secondary }}
    }
    .layui-form-radio > i:hover, .layui-form-radioed > i {
    color: {{ d.color.secondary }}
    }
    .layui-table-edit:focus {
    border-color: {{ d.color.secondary }} !important
    }
    .layui-nav-tree .layui-nav-itemed:after {
    background-color: {{ d.color.secondary }}
    }
    .layui-nav-child dd.layui-this {
    background-color: {{ d.color.secondary }}
    }
    .layui-nav .layui-nav-child dd.layui-this a {
    background-color: {{ d.color.secondary }}
    }
    .layui-breadcrumb a:hover {
    color: {{ d.color.secondary }} !important
    }
    .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom: 2px solid {{ d.color.secondary }}
    }
    .layui-tab-card > .layui-tab-more .layui-this {
    color: {{ d.color.secondary }}
    }
    .layui-timeline-axis {
    color: {{ d.color.secondary }}
    }
    .laydate-day-mark::after {
    background-color: {{ d.color.secondary }} !important
    }
    .layui-laydate-header i:hover, .layui-laydate-header span:hover {
    color: {{ d.color.secondary }} !important
    }
    .layui-laydate-footer span:hover {
    color: {{ d.color.secondary }} !important
    }
    .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
    background-color: {{ d.color.secondary }} !important
    }
    .layui-transfer-active .layui-btn {
    background-color: {{ d.color.secondary }};
    border-color: {{ d.color.secondary }};
    }
    .layui-form-checked[lay-skin=primary] i {
    border-color: {{ d.color.secondary }}!important;
    background-color: {{ d.color.secondary }};
    }
    .layui-btn-normal{background-color: {{ d.color.normal }};}
    .layui-btn-warm{background-color: {{ d.color.warm }};}
    .layui-btn-danger{background-color: {{ d.color.danger }};}
    .layui-btn-disabled,.layui-btn-disabled:hover,.layui-btn-disabled:active{background-color: #FBFBFB;}
    {{# if( d.form ){ }}
        {{# if( d.form.border_radius ){ }}
        .layui-input, .layui-select, .layui-textarea{border-radius:{{ d.form.border_radius }}px}
        .layui-form-checkbox span{border-radius:{{ d.form.border_radius }}px 0 0 {{ d.form.border_radius }}px}
        .layui-form-checkbox i{border-radius:0 {{ d.form.border_radius }}px {{ d.form.border_radius }}px 0}
        .layui-btn-group .layui-btn:first-child {border-radius: {{ d.form.border_radius }}px 0 0 {{ d.form.border_radius }}px;}
        {{# } }}
    {{# } }}
</script>

<script src="./layui.all.js(1).下载"></script>

<script>
    var $ = layui.jquery,
        layer = layui.layer,
        loading,
        currentStyle = '',
        currentStyleObj = {
            color: {
                primary:'#009688',secondary:'#5fb878',normal:'#1E9FFF',
                warm:'#FFB800',danger:'#FF5722',checked:'#5FB878'
            },
            button: {}
        },
        hasChange = false;

    //将日期直接嵌套在指定容器中
    layui.laydate.render({
        elem: '#laydateDemo'
        ,position: 'static'
        ,calendar: true //是否开启公历重要节日
        ,mark: { //标记重要日子
            '2019-08-01': '新版'
        }
        ,change: function(value, date, endDate){
            layer.msg(value)
        }
    });
    // 分页
    layui.laypage.render({
        elem: 'pageDemo' //分页容器的id
        ,count: 100 //总页数
    });
    // 滑块
    layui.slider.render({
        elem: '#sliderDemo'
        ,value: 66
        ,input: true //输入框
    });
    // 穿梭框
    layui.transfer.render({
        elem: '#demo-transfer'
        ,data: [
            {"value": "1", "title": "李白"}
            ,{"value": "2", "title": "杜甫"}
            ,{"value": "3", "title": "苏轼"}
            ,{"value": "4", "title": "李清照"}
            ,{"value": "5", "title": "鲁迅", "disabled": true}
            ,{"value": "6", "title": "巴金"}
            ,{"value": "7", "title": "冰心"}
            ,{"value": "8", "title": "矛盾"}
            ,{"value": "9", "title": "贤心"}
        ]
    });

    function changeStyle(inputStyle) {
        hasChange = true;
        loading = layer.load(2);
        $.extend(true,currentStyleObj,inputStyle);
        var styleTpl = $("#styleTpl").html();
        layui.laytpl(styleTpl).render(currentStyleObj, function(html){
            currentStyle = html;
            $("#customTheme").html(html);
            layer.close(loading);
        });
    }

    /**
     * 创建并下载文件
     * @param  {String} fileName 文件名
     * @param  {String} content  文件内容
     */
    function createAndDownloadFile(fileName, content) {
        var element = document.createElement('a');
        var blob = new Blob([content]);
        element.download = fileName;
        element.href = URL.createObjectURL(blob);
        element.click();
        URL.revokeObjectURL(blob);
    }

    function getTheme() {
        if (hasChange){
            createAndDownloadFile('layui-theme-custom.css',currentStyle);
            $.ajax({
                url:'/index/download.html',
                type:'post',
                data:{style:currentStyleObj}
            })
        } else {
            layer.msg('请先自定义主题')
        }
    }

    function changeTab(id) {
        layui.element.tabChange('previewTab',id);
    }

    function getCurrentCss() {
        if (hasChange){
            return currentStyle;
        } else {
            layer.msg('请先自定义主题');
            return false;
        }
    }

    function publishTheme() {
        if (hasChange){
            $.ajax({
                url: '/index/publish.html',
                data: {style: currentStyleObj},
                success: function (res) {
                    layer.alert('发布成功！此主题将在“浏览主题”板块可见')
                }
            })
        } else {
            layer.msg('请先自定义主题');
            return false;
        }
    }

</script>


</body></html>